<template>
  <view class="flex items-center">
    <wd-radio-group
      v-model="tag"
      shape="button"
      size="small"
      custom-class="flex items-center flex-wrap"
      @change="handleChange"
    >
      <div class="flex items-center flex-wrap">
        <div v-for="(tag, _index) in dynamicTags" :key="_index">
          <wd-radio custom-class="mb-4px" :value="tag">{{ tag }}</wd-radio>
        </div>
        <wd-tag custom-class="space" round dynamic @confirm="handleConfirm" />
      </div>
    </wd-radio-group>
  </view>
  <wd-toast />
</template>

<script setup lang="ts">
import { useToast } from 'wot-design-uni';
type TProps = {
  value: string;
};

// 添加传参
const props = withDefaults(defineProps<TProps>(), {
  value: ''
});

watch(
  () => props.value,
  (val) => {
    console.log('打印***val', val);
    if (!dynamicTags.value.includes(val)) {
      dynamicTags.value = [...dynamicTags.value, val].filter(Boolean);
    }

    tag.value = val;
  }
);

const tag = ref(props.value);
const dynamicTags = ref<string[]>([]);

const emits = defineEmits(['update:value']);

const handleChange = (e: any) => {
  console.log(e, 'e');

  emits('update:value', e.value);
};

const { warning } = useToast();

const handleConfirm = ({ value }: any) => {
  if (!value) return;
  if (dynamicTags.value.includes(value)) return warning('标签已存在');
  dynamicTags.value = [...dynamicTags.value, value];
  emits('update:value', value);
};
</script>

<style lang="scss" scoped>
:deep(.wd-radio.is-button) {
  margin-bottom: 8px;
}
</style>
